<template>
  <div class="contract">
    <div class="cart" >   
                <i class="el-icon-bangzhu"></i>
                <span>合同管理</span>
            </div>
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="按区域筛选">
            <el-select size="small"  @change="areaselected(formInline.area_name)" v-model="formInline.area_name" placeholder="按区域筛选">
            <el-option 
            v-for="(item,index) in areacho"
            :key="item+index"
            :value="item.area"
            >{{item.area}}</el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="按项目筛选">
            <el-select size="small"  @change="departmentselected(formInline.project_name)" v-model="formInline.project_name" placeholder="按项目筛选">
            <el-option 
            v-for="(item,index) in selection"
            :key="item+index"
            :value="item"
            >{{item}}</el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" size="small" @click="choose">筛选</el-button>
            <el-button type="primary" size="small" @click="allseee">全部</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="warning">
      <span>合同到期查询：</span>
      <el-button type="danger" round size="small" @click="onemonth">一个月</el-button>
      <el-button type="warning" round size="small" @click="twomonth" >两个月</el-button>
      <el-button type="primary" round size="small" @click="threemonth" >三个月</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed prop="id" label="序号" width="50"></el-table-column>
      <el-table-column prop="file_number" label="档案编号" width="50"></el-table-column>
      <el-table-column prop="name" label="姓名" width="120"></el-table-column>
      <el-table-column prop="area" label="所属公司" width="120"></el-table-column>
      <el-table-column prop="department" label="部门" width="70"></el-table-column>
      <el-table-column prop="position" label="职务名称" width="70"></el-table-column>
      <el-table-column prop="job_level" label="职级" width="120"></el-table-column>
      <el-table-column prop="gender" label="性别" width="50"></el-table-column>
      <el-table-column prop="age" label="年龄" width="50"></el-table-column>
      <el-table-column prop="birthday" label="出生年月" width="120"></el-table-column>
      <el-table-column prop="ID_number" label="身份证号" width="120"></el-table-column>
      <el-table-column prop="date_of_appointment" label="担任本职务日期" width="120"></el-table-column>
      <el-table-column prop="date_on_board" label="入职时间" width="120"></el-table-column>
      <el-table-column prop="trial_period" label="试用期限" width="120"></el-table-column>
      <el-table-column prop="join_company_date" label="司龄" width="120"></el-table-column>
      <el-table-column prop="contract_type" label="合同类型" width="120"></el-table-column>
      <el-table-column prop="contract_start_date" label="合同开始日期" width="120"></el-table-column>
      <el-table-column prop="contract_end_date" label="合同结束日期" width="120"></el-table-column>
      <el-table-column prop="sing_contract_count" label="第几次签合同" width="120"></el-table-column>
      <el-table-column prop="now_status" label="当前状况" width="120"></el-table-column>
      <el-table-column prop="is_retire" label="是否退休" width="120"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="changecontract(scope.row)">续约</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pagesize"
      layout=" prev, pager, next,jumper"
      :total="totalCount">
    </el-pagination>

    <div class="usercon1">
        <h3>合同签订情况</h3>
        <el-table :data="contractdata" border style="width: 100%">
        <el-table-column fixed prop="typeuser" label="员工类型" width="100"></el-table-column>
        <el-table-column prop="didcon" label="签订合同人数" width="100"></el-table-column>
        <el-table-column prop="docon" label="签订劳动协议人数" width="100"></el-table-column>
        </el-table>
    </div>

    <div class="usercon2">
        <h3>合同续签情况</h3>
        <el-table :data="contractdata1" border style="width: 100%">
        <el-table-column fixed prop="typeuser" label="当月合同计期人数" width="100"></el-table-column>
        <el-table-column prop="didcon" label="已续签人数" width="100"></el-table-column>
        <el-table-column prop="docon" label="未续签人数" width="100"></el-table-column>
        </el-table>
    </div>

    <el-dialog title="人员操作" :visible.sync="dialogFormVisible">
      <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="合同续约至：" required>
          <el-col :span="11">
            <el-form-item prop="contract_end_date">
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                @change="getSTime"
                placeholder="选择日期"
                v-model="ruleForm.contract_end_date"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm(ruleForm)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {post,get} from '../../../utils/axios.tool'
export default {
  data() {
    return {
      tableData: [
        {
          id: '',
          file_number: '',
          name: "",
          area:'',
          department: "",
          position: "",
          job_level: "",
          gender: "",
          age: "",
          birthday: '',
          ID_number: "",
          date_of_appointment: "",
          date_on_board: "",
          trial_period: "",
          join_company_date: "",
          contract_type: "",
          contract_start_date: "",
          contract_end_date: "",
          sing_contract_count: "",
          now_status: "",
          is_retire: ""
        }
      ],
      contractdata:[
          {
              typeuser:'正式员工',
              didcon:'',
              docon:''
          },
          {
              typeuser:'试用期员工',
              didcon:'',
              docon:''
          },
          {
              typeuser:'总人数',
              didcon:'',
              docon:''
          },
      ],
      contractdata1:[
          {
              typeuser:'',
              didcon:'',
              docon:''
          },
          {
              typeuser:'',
              didcon:'',
              docon:''
          },
          {
              typeuser:'',
              didcon:'',
              docon:''
          },
      ],
      formInline: {
          area_name: '',
          project_name: '',
          filter_parameter: "",
      },
      pagesize:10,
      currentPage:1,
      totalCount:1,
      areacho:[],
      dialogTableVisible: false,
      dialogFormVisible: false,
      ruleForm: {
        staff_id:'',
        contract_end_date:''
      },
    }
  },
  methods: {
    changecontract(row){
        this.dialogFormVisible = true
        this.ruleForm.staff_id = row.id
    },
    submitForm(formName) {
        let url = "/usermanage/contract_extension/";
        this.$axios.post(url, this.ruleForm).then(res => {
          this.dialogFormVisible = false;
          this.$message("续约成功");
          this.getData();
        });
    },
    handleCurrentChange(val){
      this.currentPage = val
      let page_size = this.pagesize
      let page = this.currentPage
      let url = `/usermanage/contracts/?page=${page}&page_size=${page_size}`;
      this.$axios.get(url,this.formInline).then(res => {
        this.tableData = res.results;
        this.totalCount = res.count
      });
    },
    areaselected(val){
      this.formInline.area_name = val
      this.formInline.project_name = ''
    },
    departmentselected(val){
      this.formInline.project_name = val
    },
    choose(){
      let page_size = this.pagesize
      this.currentPage = 1
      let page = this.currentPage
      let url = `/usermanage/contracts/?page=${page}&page_size=${page_size}`;
      this.$axios.get(url,this.formInline).then(res => {
        this.tableData = res.results;
        this.totalCount = res.count
      });
    },
    areachoose(){
      let url='/usermanage/area/'
      this.$axios.get(url).then(res=>{
        this.areacho = res.data
      })
    },
    getData(){
      let page_size = this.pagesize
      let page = this.currentPage
      let url = `/usermanage/contracts/?page=${page}&page_size=${page_size}`;
      this.$axios.get(url).then(res => {
        this.tableData = res.results;
        this.totalCount = res.count
      });
    },
    allseee(){
      this.formInline.area_name = ''
      this.formInline.project_name = ''
      this.getData()
    },
    getcontractData(){
      let url = "/usermanage/contract_situation/";
      this.$axios.get(url,this.formInline).then(res=>{
        this.contractdata[0].didcon = res.real_staff[0]
        this.contractdata[0].docon = res.real_staff[1]
        this.contractdata1[0].typeuser = res.real_staff[2]
        this.contractdata1[0].didcon = res.real_staff[3]
        this.contractdata1[0].docon = res.real_staff[4]
        this.contractdata[1].didcon = res.not_real_staff[0]
        this.contractdata[1].docon = res.not_real_staff[1]
        this.contractdata1[1].typeuser = res.not_real_staff[2]
        this.contractdata1[1].didcon = res.not_real_staff[3]
        this.contractdata1[1].docon = res.sum_count[4]
        this.contractdata[2].didcon = res.sum_count[0]
        this.contractdata[2].docon = res.sum_count[1]
        this.contractdata1[2].typeuser = res.sum_count[2]
        this.contractdata1[2].didcon = res.sum_count[3]
        this.contractdata1[2].docon = res.sum_count[4]
      })
    },
    getSTime(val){
      this.ruleForm.contract_end_date = val
    },
    onemonth(){
      this.formInline.filter_parameter = 1
      this.choose()
    },
    twomonth(){
      this.formInline.filter_parameter = 2
      this.choose()
    },
    threemonth(){
      this.formInline.filter_parameter = 3
      this.choose()
    }
  },
  mounted() {
    this.getData()
    this.areachoose()
    this.getcontractData()
  },
  computed : {
        selection :function(){
            for(var i = 0; i < this.areacho.length; i++){
                if(this.areacho[i].area == this.formInline.area_name){
                    return this.areacho[i].project;
                }
            }
        },
   }
}

</script>

<style lang="less">
.contract {
  .cart{
            width: 20%;
            margin-bottom: 30px;
            i{
                font-size: 20px;
                margin-right: 8px;
                color: gray;
            }
            span{
                font-size: 15px;
                color: gray;
                font-weight: bold;
            }
        }
  .el-input--mini .el-input__inner {
    width: 40%;
    margin-bottom: 22px;
  }
  .el-input--mini{
    display: inline;
    margin-right: 80px;
  }
  .el-pagination{
    display: flex;
    justify-content: center;
  }
  .usercon1{
      text-align: center;
      margin-top: 95px;
      border: 1px solid skyblue;
      border-radius: 10px;
      float: left;
    .el-table .cell, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell{
        font-weight: bolder;
    }
  }
  .usercon2{
      text-align: center;
      margin-top: 95px;
      border: 1px solid skyblue;
      border-radius: 10px;
      float: left;
      .el-table .cell, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell{
        font-weight: bolder;
    }
  }
  .warning{
    margin-bottom: 30px;
    margin-top: 15px;
    button{
      margin-left: 30px;
    }
  }
  .el-button--small, .el-button--small.is-round{
    margin-right: 30px;
  }
}
</style>